<template>
  <div>
    <el-row :gutter="15" style="margin-top: 20px; margin-left: 20px">
      <el-form ref="elForm" :model="formLeft" size="medium" label-width="100px">
        <el-col :span="8">
          <el-form-item label="患者姓名" prop="hzName">
            <el-input
              v-model="formLeft.hzName"
              placeholder="请输入患者姓名"
              clearable
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="就诊号" prop="hzNum">
            <el-input
              v-model="formLeft.hzNum"
              placeholder="请输入就诊号"
              clearable
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item size="large">
            <el-button type="primary" @click="submitForm">搜索</el-button>
            <el-button @click="resetForm">重置</el-button>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
    <div class="app">
      <div class="appLeft">
        <Alert>带付费患者</Alert>
        <Table
          :columns="columnsLeft"
          :data="dataLeft"
          @on-row-click="cilckLeft"
        >
            <template slot-scope="{ row }" slot="ypState">
            <Tag color="warning">{{row.ypState=="0"?"未支付":"已支付"}}</Tag>
        </template>
        </Table>
      </div>
      <div class="appRight">
        <div class="rightTop">
          <el-descriptions title="患者信息">
            <el-descriptions-item label="患者姓名">{{
              !topdata ? " " : topdata.hzName
            }}</el-descriptions-item>
            <el-descriptions-item label="年龄">{{
              !topdata ? " " : topdata.hzAge
            }}</el-descriptions-item>
            <el-descriptions-item label="性别">{{
              !topdata
                ? " "
                : topdata.hzSix == "1"
                ? "男"
                : topdata.hzSix == "0"
                ? "女"
                : " "
            }}</el-descriptions-item>
            <el-descriptions-item label="诊断号">{{
              !topdata ? " " : topdata.hzNum
            }}</el-descriptions-item>
            <el-descriptions-item label="身份证号">{{
              !topdata ? " " : topdata.hzCard
            }}</el-descriptions-item>
            <el-descriptions-item label="科室">{{
              !topdata ? " " : topdata.hzDpet
            }}</el-descriptions-item>
            <el-descriptions-item label="挂号类型">{{
              !topdata
                ? " "
                : topdata.hzLevel == "0"
                ? "普通"
                : topdata.hzLevel == "1"
                ? "专家"
                : " "
            }}</el-descriptions-item>
            <el-descriptions-item label="就诊医生">{{
              !topdata ? " " : topdata.hzDoc
            }}</el-descriptions-item>
            <el-descriptions-item label="挂号时间">{{
              !topdata ? " " : topdata.hzTime
            }}</el-descriptions-item>
          </el-descriptions>
        </div>
        <div class="rightCenter">
          <Table :columns="columnsRight" :data="dataRight"></Table>
        </div>
        <div class="rightBottom">
          <div>应付金额：</div>
          <div>
            ￥
            <div>{{ money }}</div>
            元
          </div>
          <Button type="success" size="large" @click="defray" :disabled="ypState!=0">支付</Button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  listPrescription,
  updatePrescription,
} from "@/api/medicine/prescription";
import { listDruglist } from "@/api/medicine/druglist";
import { listUser } from "@/api/qiantai/user";
export default {
  data() {
    return {
      columnsRight: [
        {
          title: "序号",
          type: "index",
          width: "80",
          align: "center",
        },
        {
          title: "药品名称",
          key: "ypName",
          align: "center",
        },
        {
          title: "药品规格",
          key: "ypNorm",
          align: "center",
        },
        {
          title: "药品总量",
          key: "num",
          align: "center",
        },
        {
          title: "单位",
          key: "ypUnit",
          align: "center",
        },
        {
          title: "药品单价",
          key: "price",
          align: "center",
        },
        {
          title: "应付金额",
          key: "action",
          align: "center",
          render: (h, params) => {
            return h("span", {}, params.row.num * params.row.price);
          },
        },
      ],
      dataRight: [],
      columnsLeft: [
        {
          title: "患者姓名",
          key: "hzName",
        },
        {
          title: "诊断号",
          width: "150",
          key: "hzNum",
        },
        {
          title: "支付状态",
          align: "center",
          slot: 'ypState',
          key: "action",
        },
      ],
      dataLeft: [],
      formLeft: {
        hzName: null,
        hzNum: null,
      },
      topdata: {},
      money: 0,
      ypState: null
    };
  },
  created() {
    this.getList();
  },
  mounted() {},
  methods: {
    cilckLeft(res) {
      this.ypState=res.ypState;
      listUser({ hzName: res.hzName, hzNum: res.hzNum }).then((res) => {
        this.topdata = res.rows[0];
      });
      listPrescription({ hzName: res.hzName, hzNum: res.hzNum }).then((res) => {
        let obj = res.rows[0];
        let arr = [];
        let money = 0;
        for (let a = 0; a < 5; a++) {
          if (obj[`ypName${a}`]) {
            arr[a] = {
              ypName: obj[`ypName${a}`],
              ypNorm: obj[`ypNorm${a}`],
              num: obj[`num${a}`],
              price: obj[`price${a}`],
            };
            listDruglist({ ypName: obj[`ypName${a}`] }).then((resDruglist) => {
              this.$set(arr[a], "ypUnit", resDruglist.rows[0].ypUnit);
              // arr[a].ypUnit=resDruglist.rows[0].ypUnit;
            });
            money += Number(obj[`num${a}`]) * Number(obj[`price${a}`]);
          }
        }
        this.dataRight = arr;
        this.money = money;
      });
    },
    getList() {
      listPrescription({ ypState: 0 }).then((res1) => {
        this.dataLeft = res1.rows;
        console.log(this.dataLeft);
      });
    },
    defray() {
      this.$confirm("患者是否完成支付?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let obj = {};
          listPrescription({ hzName: this.topdata.hzName }).then((res) => {
            obj = res.rows[0];
            obj.ypState = 1;
            this.$nextTick(() => {
              updatePrescription(obj);
            });
          });
          setTimeout(() => {
            this.getList();
            this.$message({
              type: "success",
              message: "支付成功!",
            });
            this.dataRight=[];
            this.topdata=null;
            this.money=0;
          }, 1000);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消支付",
          });
        });
    },
    submitForm() {
      listPrescription(this.formLeft).then(res=>{
          this.dataLeft=res.rows;   
      })
    },
    resetForm() {
      this.$refs["elForm"].resetFields();
      this.getList();
    },
  },
};
</script>

<style lang="scss" scoped>
.app {
  display: flex;
  justify-content: space-between;
  .appLeft {
    width: 380px;
    height: 580px;
    border-top: 2px dashed #eee;
  }
  .appRight {
    width: 960px;
    height: 580px;
    border: 2px dashed #eee;
    .rightTop {
      margin: 10px 20px;
    }
  }
  .rightBottom {
    & > :first-child {
      display: inline-block;
      border: 1px solid #8ce6b0;
      background-color: #edfff3;
      height: 43px;
      width: 110px;
      padding: 8px;
      border-radius: 4px;
      color: #515a6e;
      font-size: 18px;
      font-weight: 600;
      text-align: center;
    }
    & > :nth-child(2) {
      display: inline-block;
      border: 1px solid #ffb08f;
      background-color: #ffefe6;
      padding: 8px;
      height: 43px;
      width: 120px;
      border-radius: 4px;
      color: #515a6e;
      font-size: 18px;
      font-weight: 600;
      text-align: center;
      margin-left: 10px;
      margin-right: 580px;
      & > :first-child {
        display: inline-block;
        color: red;
      }
    }
    & > :nth-child(3) {
      margin-top: 50px;
    }
  }
}
::v-deep {
  .ivu-btn {
    width: 100px;
  }
  .ivu-alert {
      margin-bottom: 0;
  }
}
</style>
